<template>
  <div class="cell-entry-container">
    <div class="header">
      <h2><i class="iconfont icon-cell"></i> 细胞录入</h2>
      <div class="subtitle">请填写细胞样本详细信息</div>
    </div>

    <div class="entry-form">
      <!-- 细胞基本信息 -->
      <div class="form-section">
        <div class="section-title">
          <span class="section-icon">1</span>
          <h3>细胞基本信息</h3>
        </div>
        <div class="form-grid">
          <div class="form-item">
            <label class="required">细胞类型</label>
            <select v-model="formData.cellType" class="form-control">
              <option value="">请选择细胞类型</option>
              <option value="stem">干细胞</option>
              <option value="immune">免疫细胞</option>
              <option value="tumor">肿瘤细胞</option>
            </select>
          </div>

          <div class="form-item">
            <label class="required">具体名称</label>
            <input type="text" v-model="formData.cellName" class="form-control" placeholder="请输入细胞具体名称">
          </div>
        </div>
      </div>

      <!-- 存储位置信息 -->
      <div class="form-section">
        <div class="section-title">
          <span class="section-icon">2</span>
          <h3>存储位置信息</h3>
        </div>
        <div class="form-grid">
          <div class="form-item">
            <label class="required">冰柜名称</label>
            <select v-model="formData.freezer" class="form-control" @change="loadLevels">
              <option value="">请选择冰柜</option>
              <option v-for="item in freezers" :key="item.id" :value="item.id">
                {{ item.name }} (No.{{ item.number }})
              </option>
            </select>
          </div>

          <div class="form-item">
            <label class="required">层数</label>
            <select v-model="formData.level" class="form-control" @change="loadColumns" :disabled="!formData.freezer">
              <option value="">请选择层数</option>
              <option v-for="item in levels" :key="item.id" :value="item.id">
                第{{ item.number }}层
              </option>
            </select>
          </div>

          <div class="form-item">
            <label class="required">列数</label>
            <select v-model="formData.column" class="form-control" @change="loadDrawers" :disabled="!formData.level">
              <option value="">请选择列数</option>
              <option v-for="item in columns" :key="item.id" :value="item.id">
                第{{ item.number }}列
              </option>
            </select>
          </div>

          <div class="form-item">
            <label class="required">抽屉</label>
            <select v-model="formData.drawer" class="form-control" @change="loadBoxes" :disabled="!formData.column">
              <option value="">请选择抽屉</option>
              <option v-for="item in drawers" :key="item.id" :value="item.id">
                抽屉{{ item.number }}
              </option>
            </select>
          </div>

          <div class="form-item">
            <label class="required">箱号</label>
            <select v-model="formData.box" class="form-control" @change="loadCells" :disabled="!formData.drawer">
              <option value="">请选择箱号</option>
              <option v-for="item in boxes" :key="item.id" :value="item.id">
                箱{{ item.number }}
              </option>
            </select>
          </div>

          <div class="form-item">
            <label class="required">具体位置</label>
            <select v-model="formData.cell" class="form-control" :disabled="!formData.box">
              <option value="">请选择具体位置</option>
              <option v-for="item in availableCells" :key="item.id" :value="item.id">
                位置({{ item.row_number }},{{ item.column_number }})
              </option>
            </select>
          </div>
        </div>
      </div>

      <!-- 入库信息 -->
      <div class="form-section">
        <div class="section-title">
          <span class="section-icon">3</span>
          <h3>入库信息</h3>
        </div>
        <div class="form-grid">
          <div class="form-item">
            <label class="required">入库数量</label>
            <input type="number" v-model.number="formData.quantity" min="1" class="form-control">
          </div>

          <div class="form-item">
            <label class="required">入库类型</label>
            <select v-model="formData.storageType" class="form-control">
              <option value="new">新样本入库</option>
              <option value="recovery">实验回收</option>
              <option value="transfer">转移入库</option>
            </select>
          </div>
        </div>

        <div class="form-item full-width">
          <label>备注</label>
          <textarea v-model="formData.notes" class="form-control" rows="3" placeholder="可填写样本来源、处理方式等备注信息"></textarea>
        </div>
      </div>

      <div class="form-actions">
        <button type="button" @click="resetForm" class="btn btn-reset">
          <i class="iconfont icon-reset"></i> 重置
        </button>
        <button type="button" @click="submitForm" class="btn btn-submit">
          <i class="iconfont icon-submit"></i> 提交入库
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formData: {
        cellType: '',
        cellName: '',
        freezer: '',
        level: '',
        column: '',
        drawer: '',
        box: '',
        cell: '',
        quantity: 1,
        storageType: 'new',
        notes: ''
      },
      freezers: [
        { id: 1, name: '超低温冰柜A', number: 1 },
        { id: 2, name: '超低温冰柜B', number: 2 },
        { id: 3, name: '液氮罐C', number: 3 }
      ],
      levels: [],
      columns: [],
      drawers: [],
      boxes: [],
      availableCells: []
    }
  },
  methods: {
    loadLevels () {
      // 模拟加载层数数据
      this.levels = [
        { id: 1, number: 1, freezer: this.formData.freezer },
        { id: 2, number: 2, freezer: this.formData.freezer }
      ]
      this.resetLocationFields('level')
    },
    loadColumns () {
      // 模拟加载列数数据
      this.columns = [
        { id: 1, number: 1, level: this.formData.level },
        { id: 2, number: 2, level: this.formData.level }
      ]
      this.resetLocationFields('column')
    },
    loadDrawers () {
      // 模拟加载抽屉数据
      this.drawers = [
        { id: 1, number: 1, column: this.formData.column },
        { id: 2, number: 2, column: this.formData.column }
      ]
      this.resetLocationFields('drawer')
    },
    loadBoxes () {
      // 模拟加载箱号数据
      this.boxes = [
        { id: 1, number: 1, drawer: this.formData.drawer },
        { id: 2, number: 2, drawer: this.formData.drawer }
      ]
      this.resetLocationFields('box')
    },
    loadCells () {
      // 模拟加载可用位置数据
      this.availableCells = [
        { id: 1, row_number: 1, column_number: 1, box: this.formData.box, is_occupied: false },
        { id: 2, row_number: 1, column_number: 2, box: this.formData.box, is_occupied: false }
      ]
      this.formData.cell = ''
    },
    resetLocationFields (fromField) {
      const fields = ['level', 'column', 'drawer', 'box', 'cell']
      const startIndex = fields.indexOf(fromField) + 1

      for (let i = startIndex; i < fields.length; i++) {
        this.formData[fields[i]] = ''
        this[fields[i] + 's'] = []
      }
    },
    resetForm () {
      this.formData = {
        cellType: '',
        cellName: '',
        freezer: '',
        level: '',
        column: '',
        drawer: '',
        box: '',
        cell: '',
        quantity: 1,
        storageType: 'new',
        notes: ''
      }
      this.levels = []
      this.columns = []
      this.drawers = []
      this.boxes = []
      this.availableCells = []
    },
    submitForm () {
      // 验证必填字段
      const requiredFields = ['cellType', 'cellName', 'freezer', 'level', 'column', 'drawer', 'box', 'cell', 'quantity']
      const missingFields = requiredFields.filter(field => !this.formData[field])

      if (missingFields.length > 0) {
        alert('请填写所有必填字段')
        return
      }

      console.log('提交数据:', this.formData)
      alert('细胞录入成功')
      this.resetForm()
    }
  }
}
</script>
<style scoped>
.cell-entry-container {
  max-width: 1200px;
  padding: 24px;
  margin: auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.header h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header .subtitle {
  margin-top: 5px;
  font-size: 13px;
  color: #888;
}

.form-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 6px;
  border: 1px solid #eee;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e0e0e0;
}

.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  background-color: #409eff;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
}

.section-title h3 {
  margin: 0;
  font-size: 15px;
  color: #333;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
}

.form-item {
  margin-bottom: 15px;
}

.form-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

.form-item label.required::after {
  content: " *";
  color: #f56c6c;
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  color: #666;
  transition: border-color 0.2s;
}

.form-control:focus {
  outline: none;
  border-color: #409eff;
}

.form-control[disabled] {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

textarea.form-control {
  min-height: 70px;
  resize: vertical;
}

.full-width {
  grid-column: 1 / -1;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.btn-reset {
  background-color: #f0f0f0;
  color: #666;
}

.btn-reset:hover {
  background-color: #e0e0e0;
}

.btn-submit {
  background-color: #409eff;
  color: white;
}

.btn-submit:hover {
  background-color: #3080e0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .cell-entry-container {
    margin: 10px;
    padding: 15px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }
}
</style>
